<template>
  <div class="quotation warp">
    <div class="q_title1">
      <!-- <p>废钢价格行情，重废≥6mm</p> -->
    </div>
    <div class="q_chartMiddel">
      <div class="q_c_chart">
        <div class="c_chart_selet">
          <p class="selet_title">
            <span>全国平均价格：</span>
            <span>{{ priceData.nationwideAvgPrice }}元/吨</span>
          </p>
          <div class="selet_radio">
            <el-radio-group v-model="days" size="small" fill="#e50012" @input="daysSelectOnly">
              <el-radio-button label="10"></el-radio-button>
              <el-radio-button label="15"></el-radio-button>
              <el-radio-button label="30"></el-radio-button>
            </el-radio-group>
            <el-select v-model="dateVal" placeholder="请选择" size="small" @change="dateChange">
              <el-option
                v-for="item in daysList"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
          
        </div>
        <div class="c_chart_table">
          <div class="chart_CityPrice">
            <div class="min_max">
              <p>最高：
                <span>{{priceData.maxCityPrice.price}}</span>
                <span>{{priceData.maxCityPrice.region_name}}</span>
              </p>
              <p>最低：
                <span>{{priceData.minCityPrice.price}}</span>
                <span>{{priceData.minCityPrice.region_name}}</span>
              </p>
            </div>
          </div>
          <div id="maychar" style="width: 864px; height: 350px"></div>
          <p class="hint">注：平均价以及价格涨幅仅供参考以当地实际情况为准</p>
        </div>
      </div>
      <div class="q_c_table">
        <div class="q_c_price">区域平均价格</div>
        <el-table
          :data="regionAvgPrice"
          style="width: 100%">
          <el-table-column
            prop="region_name"
            align="center"
            label="区域">
          </el-table-column>
          <el-table-column
            prop="provincePrice"
            align="center"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="upsAndDownsPrices"
            align="center"
            label="涨跌">
            <template slot-scope="scope">
                <!-- <div class="red" v-if="scope.row.state == '2'">撤销</div>
                <div class="red" v-if="scope.row.state == '1'&&scope.row.is_first == 1">领先</div>
                <div v-if="scope.row.state == '1'&&scope.row.is_first == 0">出局</div> -->
                <p v-if="scope.row.upsAndDowns == 1" style="color:#e50012"><i class="el-icon-top"></i>{{scope.row.upsAndDownsPrices}}</p>
                <p v-else-if="scope.row.upsAndDowns == 0">--</p>
                <p v-else style="color:#0ab86c"><i class="el-icon-bottom"></i>{{scope.row.upsAndDownsPrices}}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 各省份平均价 -->
    <div class="q_provinceSecond">
      <div class="q_p_title">各省份平均价</div>
      <div class="q_p_card">
        <el-card shadow="hover" v-for="(item,i) in provinceAvgPrice" :key="i">
          <div class="card_name">{{item.region_name}}</div>
          <div class="row_p">
            <div class="row_p_l">
              <p>今日均价</p>
              <p>{{item.provincePrice}}元</p>
            </div>
            <div class="row_p_l">
              <p>今日涨跌</p>
              <p v-if="item.upsAndDowns == 1" style="color:#DF0000"><i class="el-icon-top"></i>{{item.upsAndDownsPrices}}</p>
              <p v-else-if="item.upsAndDowns == 0">--</p>
              <p v-else style="color:#0ab86c"><i class="el-icon-bottom"></i>{{item.upsAndDownsPrices}}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 全国主要城市价格汇总 -->
    <div class="q_provinceSecond margin_bot">
      <div class="q_p_title">全国主要城市价格汇总</div>
      <div class="q_p_con">
        <div>
          <p class="q_p_ward"><i class="el-icon-map-location"></i>华东地区（上海、山东、江苏、安徽、浙江、江西、福建）</p>
          <cardBox :city-card="cityPrice.eastWard"/>
        </div>
        <div>
          <p class="q_p_ward"><i class="el-icon-map-location"></i>华南地区（广东,广西）</p>
          <cardBox :city-card="cityPrice.southWard"/>
        </div>
        <div>
          <p class="q_p_ward"><i class="el-icon-map-location"></i>华中地区（湖北,湖南,河南）</p>
          <cardBox :city-card="cityPrice.centreWard"/>
        </div>
        <div>
          <p class="q_p_ward"><i class="el-icon-map-location"></i>华北地区（北京,天津,河北,山西,内蒙古）</p>
          <cardBox :city-card="cityPrice.northWard"/>
        </div>
        <div>
          <p class="q_p_ward"><i class="el-icon-map-location"></i>西北地区（甘肃,青海,宁夏,新疆,陕西）</p>
          <cardBox :city-card="cityPrice.westNorthWard"/>
        </div>
        <div>
          <p class="q_p_ward"><i class="el-icon-map-location"></i>西南地区（四川,云南,贵州,重庆）</p>
          <cardBox :city-card="cityPrice.westSouthWard"/>
        </div>
        <div>
          <p class="q_p_ward"><i class="el-icon-map-location"></i>东北地区（辽宁,吉林,黑龙江）</p>
          <cardBox :city-card="cityPrice.eastNorthWard"/>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import cardBox from './cardBox.vue'
import {StatisticsData,quotationListTime} from '@/api/interface'
export default {
  components:{
    cardBox
  },
  data() {
    return {
      days:'10',
      dateVal:'',
      daysList:[],//重废行情日期
      StatisticsChartDate:[], //chat日期
      StatisticsChartPrice:[], //chat 钱
      regionAvgPrice:[],//区域平均价格
      priceData:{
        maxCityPrice:'',
        minCityPrice:'',
        nationwideAvgPrice:''
      },//最高最低价的两个城市
      cityPrice:{
        northWard:[],
        eastWard:[],
        southWard:[],
        centreWard:[],
        westNorthWard:[],
        westSouthWard:[],
        eastNorthWard:[],

      },//全国主要城市价格汇总
      provinceAvgPrice:[], //各省份平均价
      max:'',
      min:'',

    };
  },
  created() {
    this.getDays();
  },
  methods: {
    // ------获取页面数据---------
    getList(days,date){
      StatisticsData({days:days,date:date}).then(res=>{
        this.StatisticsChartDate = res.data.StatisticsChart.StatisticsChartDate; //chat日期
        this.StatisticsChartPrice = res.data.StatisticsChart.StatisticsChartPrice; ////chat 钱
        this.regionAvgPrice = res.data.regionAvgPrice;  //区域平均价格
        this.priceData.maxCityPrice = res.data.priceData.maxCityPrice; //最高最低价的两个城市
        this.priceData.minCityPrice = res.data.priceData.minCityPrice; //最高最低价的两个城市
        this.priceData.nationwideAvgPrice = res.data.priceData.nationwideAvgPrice; //最高最低价的两个城市
        this.cityDataDispose(res.data.cityPrice);//全国主要城市价格
        this.provinceAvgPrice = res.data.provinceAvgPrice; //各省份平均价
        this.max = Math.max.apply(null, this.StatisticsChartPrice); //最大值
        this.min = Math.min.apply(null, this.StatisticsChartPrice); //最小值
        this.changetype();
      })
    },
    // -------------数据处理-全国主要城市价格---------------------
    cityDataDispose(data){
      data.forEach((item, index, array) => {
        switch (item.regionid) {
          case 1:      //华北地区 northWard
              this.cityPrice.northWard.push(item);       
              break;    
          case 15:      //15华东地区 eastWard
              this.cityPrice.eastWard.push(item);         
              break;    
          case 38:      //38华南地区  southWard
              this.cityPrice.southWard.push(item);       
              break;    
          case 45:       //45华中地区  centreWard
              this.cityPrice.centreWard.push(item);         
              break;    
          case 53:       //53西北地区   westNorthWard
              this.cityPrice.westNorthWard.push(item);      
              break;    
          case 64:       //64西南地区   westSouthWard
              this.cityPrice.westSouthWard.push(item);        
              break;     
          case 73:      //73东北地区    eastNorthWard
              this.cityPrice.eastNorthWard.push(item);         
              break;    
        } 
      });
    },
    // ----------日期下拉数据--------------
    getDays(){
      quotationListTime().then(res =>{
        this.daysList = res.data.timeData;
        this.dateVal = res.data.timeData[0];
        this.getList(this.days,res.data.timeData[0]);
      })
    },
    // -------------选择天数-------------
    daysSelectOnly(label){
      this.getList(label,this.dateVal);
    },
    dateChange(label){
      this.getList(this.days,label);
    },
    // --------------------------------------------
    // 折线图
    changetype() {
      this.$nextTick(() => {
        // 获取组件实例
        const machart = this.$echarts.init(document.getElementById("maychar"));
        // 设置配置项
        const option = {
          // color: ['#32E5FF'],
          color: ["#562E02"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: { backgroundColor: "#6a7985" },
            },
          },
          grid: {
            top: "10%",
            left: "10%",
            right: "10%",
            bottom: "10%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: this.StatisticsChartDate,
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: 'rgba(20, 35, 87, 1)'
            //   }
            // },
            boundaryGap: false, // 坐标两侧是否留白
            axisTick: {
              show: false, // 是否显示刻度线
            },
          },
          yAxis: [
            {
              type: "value",
              min:this.min, //取最小值为最小刻度
              max:this.max, //取最大值为最大刻度
              scale: true, //自适应
              axisLabel: {
                color: "#562E02", // y 轴文字颜色
              },
              axisLine: {
                show: true,
                // lineStyle: {
                //   color: "#E4E7ED", // y 轴轴线颜色
                // },
              },
              splitLine: {
                show: false,
                // lineStyle: {
                //   color: "#E4E7ED", //grid 区域中的分隔线颜色
                //   width: 1,
                //   type: "solid",
                // },
              },
            },
            {
              type: "value",
              name: "(元/吨)",
              position: "left",
              alignTicks: true,
              nameGap: 8,
              axisLine: {
                show: false, // 是否显示 y 轴轴线
              },
              axisLabel: {
                formatter: "{value}",
              },
              nameTextStyle: {
                padding: [0, 10, 8, 0], // 单位位置
              },
            },
          ],
          series: [
            {
              type: "line",
              smooth: true, // 平滑显示
              name: "折线图",
              data: this.StatisticsChartPrice,
              itemStyle: {
                color: "#cc0000", // 数据颜色  #FEADA4  #FFE4E1
                gradientColorNum: 1,
              },
              areaStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "rgba(211, 0, 0, 1) ", // 0% 处的颜色 rgba(6, 252, 254, 0.1) rgba(232, 105, 14, 1)
                    },
                    {
                      offset: 0.3,
                      color: "rgba(205, 1, 1, 0.8) ", // 0% 处的颜色 rgba(6, 252, 254, 0.1) rgba(232, 105, 14, 1)

                    },
                    {
                      offset: 0.5,
                      color: "rgba(205, 1, 1, 0.5)", // 0% 处的颜色  rgba(244, 106, 106, 0.8)
                    },
                    {
                      offset: 0.8,
                      color: "rgba(205, 1, 1, 0.2)", // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: "rgba(205, 158, 123,0.2)", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          ],
        };

        // 复制
        machart.setOption(option);
        // // 根据页面大小自动响应图表大小
        // window.addEventListener("resize", function () {
        //   machart.resize();
        // });
      });
    },
  },
};
</script>


<style scoped lang="less">
.quotation{
  .q_title1{
    margin: 20px 0;
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: url('@/assets/qutation_tit1.png');
    border-radius: 8px;
    p{
      font-size: 34px;
      font-weight: 600;
      // color: rgba(205, 158, 123);
      color: #e50012;
      // color: #D7975A;
      text-align: center;
      letter-spacing:18px;
    }
  }
  .q_chartMiddel{
    display: flex;
    justify-content: space-between;
    background-color: #F5F6F7;
    .q_c_chart{
      background-color: #fff;
      width: 882px;
      border-radius: 8px;
      .c_chart_selet{
        height: 60px;
        border-bottom: 4px solid #F5F6F7;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        .selet_title{
          font-size: 20px;
          font-weight: 600;
        }
        .selet_radio{
            // 添加颜色类
            ::v-deep .el-radio-button__inner:hover{
              color: #e50012;
            }
          .el-select{
            margin-left: 10px;
          }
        }
      }
      .c_chart_table{
        .chart_CityPrice{
          display: flex;
          justify-content: flex-end;
          div{
            font-size: 14px;
            margin: 10px;
            p:first-child{
              
              span{
                color:#e50012;
                font-weight: 600;
              }
            }
            p:last-child{
              span{
                color:#0ab86c;
                font-weight: 600;
              }
            }
          }
        }
        .hint{
          color: #e50012;
          margin-left: 20px;
        }
      }
      
    }
    .q_c_table{
      background-color: #fff;
      width: 288px;
      border-radius: 8px;
      .q_c_price{
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        font-weight: 600;
        border-bottom: 4px solid #F5F6F7;
        justify-content: space-between;
        text-align: center;
        /deep/.el-table::before {
          height: 0;
        }
      }
      
    }
  }
  // 各省份平均价
  .margin_bot{
    margin-bottom: 20px;
  }
  .q_provinceSecond{
    margin-top: 20px;
    border-radius: 8px;
    background-color: #fff;
    .q_p_title{
      font-size: 22px;
      font-weight: 600;
      text-align: center;
      border-bottom: 4px solid #F5F6F7;
      height: 60px;
      line-height: 60px;
    }
    .q_p_card{
      padding: 20px;
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill,179px);
      grid-gap: 10px;
      // flex-flow:row wrap;
      .el-card{
        width: 178px;
        /deep/.el-card__body{
          padding: 10px;
        }
        .card_name{
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          margin-bottom: 10px;
          color: #606266;
        }
        .row_p{
          padding: 10px;
          background-color: #F5F6F7;
          display: flex;
          justify-content: space-between;
          .row_p_l{
            text-align: center;
            font-weight: 600;
            p:first-child{
              font-size: 12px;
              color: #909399;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    
    .q_p_con{
      padding: 20px 0;
      .q_p_ward{
        color: #303133;
        font-size: 16px;
        font-weight: 600;
        margin-left: 20px;
        .el-icon-map-location{
          font-weight: 600;
          color: rgba(205, 1, 1);
          margin-right: 6px;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
